<template>
  <div class="edit">
    <back/>
    <h2>个人信息</h2>
    <div class="edit-item">
      <label for="avatar" class="touxiang"
        >头像
        <img class="avatar" :src="avatar" alt="" />
      </label>
      <input
        id="avatar"
        class="input"
        ref="input"
        type="file"
        name="photos"
        multiple="multiple"
        accept="image/jpg,image/jpeg,image/png,image/svg"
        @change="getFile($event)"
      />
    </div>
    <div class="username edit-item">
      <label>账号</label>
      <input class="content" :value="username" disabled />
    </div>
    <div class="edit-item">
      <label for="nickname">昵称</label>
      <input type="text" id="nickname" class="content" v-model="nickname" />
    </div>
    <div class="edit-item">
      <span>性别</span>
      <select name="" id="select" v-model="sex">
        <option value="man">男</option>
        <option value="women">女</option>
      </select>
    </div>
    <div class="edit-item ">
      <label>签名</label>
      <input
        type="text"
        value="我是个大帅哥"
        class="content"
        v-model="signatrue"
      />
    </div>
    <div class="button">
      <button @click="submit">提交</button>
    </div>
  </div>
</template>

<script>
import Back from '../../components/Back/Back.vue';
export default {
  components: { Back },
  name: "",
  data() {
    return {
      userInfo: {},
      _id:null,
      nickname: "",
      sex: "",
      signatrue: "",
      avatar: "",
      username: ""
    };
  },
  mounted() {},
  computed: {
    isLogin() {
      return this.$store.state.isLogin;
    },
  },
  created() {
    this.userInfo =JSON.parse(localStorage.getItem("userInfo"))|| this.$store.state.user;
    this.nickname = this.userInfo.nickname;
    this.sex = this.userInfo.sex;
    this.signatrue = this.userInfo.signatrue;
    this.avatar = this.userInfo.avatar;
    this.username = this.userInfo.username;
    this._id = this.userInfo._id
  },
  methods: {
    getFile(e) {
        let formData = new FormData();
        let file = e.target.files[0];
        formData.append("file", file);
        console.log(formData.get("file"));
        // let formart = e.target.files[i].name.split(".")[1];
        // let config={
        //   headers:{'Content-Type':'multipart/form-data'}
        // }
        this.$axios({
          url: "/upload/avatar",
          method: "post",
          data: formData
        }).then(res => {
          this.avatar = res.data;
          console.log(res.data);
        });
    },
    submit() {
        let data = {
          _id: this._id,
          avatar: this.avatar,
          nickname: this.nickname,
          sex: this.sex,
          signatrue: this.signatrue
        };
        console.log(data);
        this.$axios({
          url: "/users/edit",
          method: "post",
          data: data
        }).then(res => {
          this.$emit('updateUser')
          this.$router.push('/profile');
        });
      }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* .edit {
} */
h2 {
  text-align: center;
  background-color: #eee;
  padding: 10px 0;
}
.avatar {
  width: 50px;
  height: 50px;
  margin-left: 40%;
  transform: translate(-50%);
  background-image: url("../../assets/img/Profile/user.svg");
  background-size: cover;
  border: 0px;
  border-radius: 50%;
}
#avatar {
  display: none;
}
.touxiang {
  display: block;
  width: 100%;
}
.edit-item {
  margin-top: 20px;
  width: 100%;
  padding: 10px 5px 10px 5px;
  border-bottom: 0.5px solid #999;
}
.edit-item input {
  outline: none;
  border: 0px;
  width: 100%;

  text-align: center;
  font-size: 18px;
}
#select {
  width: 100%;
  border: 0px;
  margin: 0;
  text-align: center;
  text-align-last: center;
}
#select option {
  text-align: center;
}
.button {
  width: 100%;
  text-align: center;
}
button {
  margin-top: 20px;
  width: 200px;
  height: 50px;
  font-size: 20px;
  border-radius: 12px;
}
</style>
